<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>07.for循环生成100个div - 浮动</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			.wrap {
				width: 1000px;
				margin: 50px auto 0;
				border: 1px solid #000;
			}	
			
			.wrap div {
				width: 98px;
				height: 98px;
				border: 1px solid #000;
				float: left;
				font-weight: bold;
				font-size: 18px;
				line-height: 100px;
				font-family: "SimSun";
				color: #999;
				text-align: center;
			}
		</style>
		<script>
			window.onload = function () {
				var oWrap = document.querySelectorAll(".wrap")[0];
				var oInner = '';
				
				for ( var i = 0; i < 100; i++ ) {
					oInner += '<div>第'+ (i + 1) +'个div</div>';		
				}
				
				oWrap.innerHTML = oInner;
			};
		</script>
	</head>
	<body>
		<!-- 这里要存放100个div start -->
		<div class="wrap clearfix"></div>	
		<!-- 这里要存放100个div end -->
	</body>
</html>